<template>
	<div v-loading.fullscreen.lock="fullscreenLoading">
		<el-card class="!border-none" v-loading="pager.loading" shadow="never">
			<el-tabs v-model="tabsActive" @tab-change="handelTabsChange" class="mb-4">
				<el-tab-pane v-for="(item, index) in tabs" :key="index" :label="item.name" :name="item.type"
					lazy></el-tab-pane>
			</el-tabs>
			<el-button v-perms="['user.user_tron/add']" type="primary" @click="handleAdd" v-if="tabsActive==2">
				<template #icon>
					<icon name="el-icon-Plus" />
				</template>
				创建
			</el-button>
			<el-button v-perms="['user.user_tron/tranAll']" type="danger" @click="tranAllState.show = true"
				v-if="tabsActive==1">
				归集
			</el-button>
			<el-button v-perms="['user.user_tron/delete']" :disabled="!selectData.length"
				@click="handleDelete(selectData)">
				删除
			</el-button>
			<div class="mt-4">
				<el-table :data="pager.lists" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55" />
					<el-table-column label="用户" width="180" v-if="tabsActive==1">
						<template #default="{ row }">
							<div v-if="row.user_info">账号：{{row.user_info.mobile}}</div>
							<div v-if="row.user_info">邀请码：{{row.user_info.sn}}</div>
						</template>
					</el-table-column>
					<el-table-column label="地址" prop="address" show-overflow-tooltip />
					<el-table-column label="私钥" prop="key" show-overflow-tooltip />
					<el-table-column label="二维码" prop="qrcode">
						<template #default="{ row }">
							<image-contain v-if="row.qrcode" :src="row.qrcode" :width="60" :height="60"
								:preview-src-list="[row.qrcode]" preview-teleported fit="contain" />
						</template>
					</el-table-column>
					<el-table-column label="TRX余额" prop="money_trx" show-overflow-tooltip>
						<template #default="{ row }">
							<div>{{row.money_trx}}</div>
							<div>
								<el-button v-perms="['user.user_tron/updateMoney']" type="primary" size="small"
									@click="handleUpdate(row.id)">
									更新
								</el-button>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="USDT余额" prop="money_usdt" show-overflow-tooltip>
						<template #default="{ row }">
							<div>{{row.money_usdt}}</div>
							<div>
								<el-button v-perms="['user.user_tron/updateMoney']" type="primary" size="small"
									@click="handleUpdate(row.id)">
									更新
								</el-button>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="排序" prop="sort" width="200" v-if="tabsActive==2">
						<template #default="{ row }">
							<el-input-number v-perms="['user.user_tron/updateSort']" v-model="row.sort" :min="1"
								:max="9999" @change="handleSort($event,row.id)" />
						</template>
					</el-table-column>
					<el-table-column label="创建时间" prop="create_time" show-overflow-tooltip />
					<el-table-column label="操作" width="120" fixed="right">
						<template #default="{ row }">
							<el-button v-perms="['user.user_tron/tran']" type="primary" link
								@click="handleTran(row.money_usdt,row.id)">
								转账
							</el-button>
							<el-button v-perms="['user.user_tron/delete']" type="danger" link
								@click="handleDelete(row.id)">
								删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="flex mt-4 justify-end">
				<pagination v-model="pager" @change="getLists" />
			</div>
		</el-card>

		<tran v-model:show="tranState.show" :value="tranState.value" @confirm="handleConfirmTran" />
		<tranAll v-model:show="tranAllState.show" @confirm="handleConfirmTranAll" />
	</div>
</template>

<script lang="ts" setup name="userTronLists">
	import { usePaging } from '@/hooks/usePaging'
	import { apiUserTronLists, apiUserTronDelete, apiUserTronAdd, apiUserTronUpdateSort, apiUserTronUpdateMoney, apiUserTronTran, apiUserTronTranAll } from '@/api/user_tron'
	import feedback from '@/utils/feedback'
	import tran from './tran.vue'
	import tranAll from './tranAll.vue'

	const fullscreenLoading = ref(false)
	const tabsActive = ref(2)
	const tabs = [
		{
			name: '系统钱包',
			type: 2
		},
		{
			name: '用户钱包',
			type: 1
		},

	]

	const tranAllState = reactive({
		show: false,
	})
	const tranState = reactive({
		show: false,
		value: '',
		id: 0
	})
	// 查询条件
	const queryParams = reactive({
		type: 2
	})

	// 选中数据
	const selectData = ref<any[]>([])

	// 表格选择后回调事件
	const handleSelectionChange = (val : any[]) => {
		selectData.value = val.map(({ id }) => id)
	}

	// 分页相关
	const { pager, getLists, resetParams, resetPage } = usePaging({
		fetchFun: apiUserTronLists,
		params: queryParams
	})

	const handelTabsChange = async () => {
		queryParams.type = tabsActive.value
		getLists()
	}
	// 添加
	const handleAdd = async () => {
		await feedback.confirm('确定要创建系统钱包？')
		await apiUserTronAdd()
		getLists()
	}

	//更新金额
	const handleUpdate = async (id : number) => {
		try {
			await apiUserTronUpdateMoney({
				id,
			})
			getLists()
		} catch (error) {
			getLists()
		}
	}
	//更新排序
	const handleSort = async (sort : number, id : number) => {
		try {
			await apiUserTronUpdateSort({
				id,
				sort
			})
			// getLists()
		} catch (error) {
			getLists()
		}
	}
	// 删除
	const handleDelete = async (id : number | any[]) => {
		await feedback.confirm('确定要删除？')
		await apiUserTronDelete({ id })
		getLists()
	}
	//转账
	const handleTran = (value : string, id : number) => {
		tranState.show = true
		tranState.value = value
		tranState.id = id
	}
	//转账
	const handleConfirmTran = async (value : any) => {
		fullscreenLoading.value = true;
		await apiUserTronTran({ id: tranState.id, ...value })
		tranState.show = false
		fullscreenLoading.value = false;
		getLists()
	}
	//归集
	const handleConfirmTranAll = async (value : any) => {
		fullscreenLoading.value = true;
		await apiUserTronTranAll({ ...value })
		tranAllState.show = false
		fullscreenLoading.value = false;
		getLists()
	}

	getLists()
</script>